// subpackagesA/pages/canvas/canvas.ts
// canvas 全局配置
var context = null as any; // 使用 wx.createContext 获取绘图上下文 context
var mCanvas = null as any;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    context: '',
    isDrawing: false,
    lastX: 0,
    lastY: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    const _this = this
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        // Canvas 对象
        const canvas = res[0].node
        mCanvas = res[0].node
        // 渲染上下文
        context = canvas.getContext('2d')
        // Canvas 画布的实际绘制宽高
        const width = res[0].width
        const height = res[0].height
        // 初始化画布大小
        const dpr = wx.getWindowInfo().pixelRatio
        canvas.width = width * dpr
        canvas.height = height * dpr
        context.scale(dpr, dpr)
        //绘制背景
        context.fillStyle = '#fff'
        context.clearRect(0, 0, canvas.width, canvas.height)
        context.fillRect(0, 0, canvas.width, canvas.height)
        // console.log(res)
        // const canvas = res[0].node
        // const ctx = canvas.getContext('2d')
        // _this.setData({
        //   context:ctx
        // })
        // console.log(_this.data.context,ctx)
        // const dpr = wx.getSystemInfoSync().pixelRatio
        // canvas.width = res[0].width * dpr
        // canvas.height = res[0].height * dpr
        // ctx.scale(dpr, dpr)

        // ctx.fillRect(0, 0, 100, 100)
      })
    // let _this = this
    // const context = wx.createCanvasContext('myCanvas');
    // _this.setData({
    //   context: context
    // });
    // wx.createSelectorQuery()
    //   .select('#myCanvas') // 在 WXML 中填入的 id
    //   .fields({ node: true, size: true })
    //   .exec((res) => {
    //     console.log(res)
    //     // Canvas 对象
    //     const canvas = res[0].node
    //     // 渲染上下文
    //     const ctx = canvas.getContext('2d')

    //   });

  },
  startDraw(event: any) {
    // 开始绘制
    context.moveTo(event.touches[0].x, event.touches[0].y);
    // const {
    //   x,
    //   y
    // } = e.touches[0];
    // this.setData({
    //   isDrawing: true,
    //   lastX: x,
    //   lastY: y
    // });
  },
  drawing(event: any) {
    // const _this = this
    // 绘制中
    var x = event.touches[0].x;
    var y = event.touches[0].y;
    context.lineWidth = 4
    context.lineCap = 'round'
    context.lineJoin = 'round'
    context.lineTo(x, y);
    context.stroke();
    // var x = event.touches[0].x;
    // var y = event.touches[0].y;
    // _this.data.context.lineWidth = 4
    // _this.data.context.lineCap = 'round'
    // _this.data.context.lineJoin = 'round'
    // _this.data.context.lineTo(x, y);
    // _this.data.context.stroke();
    this.setData({
      isDrawing: true,
    });
    // if (!this.data.isDrawing) return;
    // const {
    //   x,
    //   y
    // } = e.touches[0];
    // const {
    //   lastX,
    //   lastY
    // } = this.data;
    // console.log(this.data.context.strokeStyle)
    // this.data.context.strokeStyle = '#000000'
    // this.data.context.lineWidth = 3;
    // this.data.context.lineCap = 'round';
    // this.data.context.beginPath();
    // this.data.context.moveTo(lastX, lastY);
    // this.data.context.lineTo(x, y);
    // this.data.context.stroke();
    // this.data.context.draw(true);
    // this.setData({
    //   lastX: x,
    //   lastY: y
    // });
  },
  endDraw() {
    // 结束绘制
    this.setData({
      isDrawing: true
    });
  },
  clearCanvas() {
    // 清空画布
    // this.data.context.clearRect(0, 0, 1000, 1000);
    // this.data.context.beginPath(true);
    context.clearRect(0, 0, mCanvas.width, mCanvas.height); //清除画布
    context.beginPath() //清空画笔
    this.setData({
      isDrawing: false,
    });
  },
  saveImage() {
    let that = this
    if (!this.data.isDrawing) {
      wx.showModal({
        title: '提示',
        content: '签名内容不能为空！',
        showCancel: false
      });
      return false;
    };
    wx.canvasToTempFilePath({
      canvas: mCanvas,
      success: function (res) {
        let pages = getCurrentPages();
        let prevPage = pages[pages.length - 2];//获取上一级页面实例
        let imgUrl = res.tempFilePath
        prevPage.setData({
          userSign: imgUrl//需要传递的参数
        })
        wx.navigateBack({ // 返回上一级页面
          delta: 1
        });
        // console.log(res.tempFilePath)
      }
    });
  },
  onClickLeft() {
    wx.navigateBack({
      delta: 1
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})